<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	    <title>网上祭奠</title>
        <link rel="stylesheet" href="css/common.css" />
        <link rel="stylesheet" href="css/image-clip.css" />
        <link rel="stylesheet" href="css/clip.css" />
	    <!-- Bootstrap -->
	    <link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet">
		<link href="js/JBox/jBox.css" rel="stylesheet" />
		<link href="js/JBox/plugins/Notice/jBox.Notice.css"  rel="stylesheet"/>
		<link rel="stylesheet" href="css/index.css" />
	    <link rel="stylesheet" href="css/sitelogo.css" />
	    <link rel="stylesheet" href="css/cropper.min.css" />
	    <link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">
	    <!--[if lt IE 9]>
	      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
	    <![endif]-->
	    
	    <script type="text/javascript" src="js/jquery.min.js" ></script>
	    <script type="text/javascript" src="js/bootstrap.min.js"></script>
	    <script type="text/javascript" src="js/draggabilly.pkgd.js"></script>
	    <script type="text/javascript" src="js/jquery.mCustomScrollbar.js" ></script>
	    <script type="text/javascript" src="js/jquery.mCustomScrollbar.concat.min.js" ></script>
	    <script type="text/javascript" src="js/JBox/jBox.js" ></script>
	    <script type="text/javascript" src="js/JBox/plugins/Notice/jBox.Notice.js" ></script>
	    <script type="text/javascript" src="js/jquery.easing.1.3.js" ></script>
	    <script type="text/javascript" src="js/move-top.js" ></script>
	    <script type="text/javascript" src="js/html2canvas.min.js" ></script>
	    <script type="text/javascript" src="js/cropper.js" ></script>
	    <script type="text/javascript" src="js/sitelogo.js" ></script>
    	<script type="text/javascript" src="js/jquery.cookie.js" ></script>
	    <script>	    	
	    	if($.cookie("JP")==null||$.cookie("JP")=="null"){
    			window.location="Login.html";
    		}
	    	
	    	var mydate=new Date();
		    var _sid,_mname, _msex,_mage,_deathdate, _birthaddress,_homeaddress,_deathdate,_origin,_origin,_nation,_mresume,_mphotopath,_mintropicpath,_sign;
		    var _mhname,_mid,_bgid,_tpicpathbg,_tid,_tpicpath,_createtime,_rightsid,_rightsname;
		    var _note1;//被祭奠人类别
		    var _note2;//创建者姓名
		    var _note3;//创建者ID
		    var _mhname,_mid,_createtime,_rightsid,_rightsname;
		    var _mphotopath="http://120.77.182.247:8001/WO/img/unknown.png";
		    var _bgid=1;
		    var _tpicpathbg="http://120.77.182.247:8001/JdSource/background/bj001.jpg";
		    var _tid=5;
		   	var _tpicpath="http://120.77.182.247:8001/JdSource/tombstone/1.png";
	    	
	    	$(document).ready(function(){
		    	
	    		$().UItoTop({ easingType: 'easeOutQuart' });
	    		
	    	   			
    			$(".Newshrine-menus").find(".Newshrine-menu").each(function(){
    				$(this).click(function(){
    					if($(this).text()=="逝者信息"){
	    					$(".Newshrine-menu").removeClass("Newshrine-menu-select");
	    					$(this).addClass("Newshrine-menu-select");
    						$(".newshrine-main-shrine").hide();
    						$(".newshrine-main-person").show();
    						
    					}else if($(this).text()=="祭奠堂信息"){    						
					    	_mname=$.trim($("#person-name").val());
					    	_birthdate=$.trim($("#person-birth").val());
					    	_deathdate=$.trim($("#person-death").val());
					    	
    						if(_mname==""||_mname==null){
    							new jBox('Notice', {width: 150,height: 50,content: '请输入逝者姓名',autoClose: 2000,
								    color: 'black',animation: {open: 'slide',close: 'slide:top'},
								    position: {x:'center',y: 'bottom'}
								 });
    						}else if(_birthdate==""||_birthdate==null){
    							new jBox('Notice', {width: 150,height: 50,content: '请选择逝者生辰',autoClose: 2000,
								    color: 'black',animation: {open: 'slide',close: 'slide:top'}
								 });
    						}
    						else if(_deathdate==""||_deathdate==null){
    							new jBox('Notice', {width: 150,height: 50,content: '请选择逝世日期',autoClose: 2000,
								    color: 'black',animation: {open: 'slide',close: 'slide:top'}
								 });
	    					}else{    							
			    					$(".Newshrine-menu").removeClass("Newshrine-menu-select");
			    					$(this).addClass("Newshrine-menu-select");
	    							$(".newshrine-main-person").hide();
	    							$(".newshrine-main-shrine").show();
	    					}
	    				}
    				});
    			});
    			
    			//移动端点击两下才能选择日期的解决方法：
    			$('#person-birth,#person-death').focus(function(){
				    var obj = $(this);
				    obj.prop('type','date');
				    setTimeout(function(){obj.trigger('click');},10);
				});
				
				//没填写时间时失去焦点恢复支持 placeholder
				
				$('#person-birth,#person-death').blur(function(){
				    var obj = $(this);
				    if(!obj.val()){
				        obj.prop('type','text');
				    }
				});

				$(".Newshrine-person-face").click(function(){
					$(".Newshrine-person-face-form").fadeIn("fast");
					document.querySelector('.clip-content').classList.remove('hidden');
				});
				
				$(".Newshrine-person-face-form-close").click(function(){
					$(".Newshrine-person-face-form").fadeOut("fast");
				});
				
				 $(".avatar-save").click(function() {
					var img_lg = document.getElementById('imageHead');
					if($('#imageHead').html()!=""){
						// 截图小的显示框内的内容
						html2canvas(img_lg, {
							allowTaint: true,
							taintTest: false,
							onrendered: function(canvas) {
								canvas.id = "mycanvas";
								//生成base64图片数据
								_mphotopath = canvas.toDataURL("image/jpeg");		
								
								new jBox('Notice', {width: 150,height: 50,content: '遗像已保存',autoClose: 2000,
							    	color: 'black',animation: {open: 'slide',close: 'slide:top'}
							  	});
							}
						});
					}else{
						new jBox('Notice', {width: 150,height: 50,content: '请选择一张图片',autoClose: 2000,
					    	color: 'black',animation: {open: 'slide',close: 'slide:top'}
					  	});
					}				
			});
	    	});
	    	
	    function showBG(){		    
		    $.ajax({
	          url: "/api/Memorial/GetTombstoneinfo?tCategory=2",
	          type: "GET",
	          dataType: "json", 
	          success: function (data) {	
							var dataObj=eval(data);
							var html="";
							for(var i=0;i<dataObj.Data.length;i++){
								html+="<div class='col-lg-4 col-md-4 col-sm-4 col-xs-4 shrine-bg-content' style='padding:5px'>";
								html+="<div class='pop2-img' data-bg='"+dataObj.Data[i]._tpicpath+"' style='background-image:url("+dataObj.Data[i]._tpicpath+");' title='"+dataObj.Data[i]._tname+"'>";
								html+="</div><input id='bgid' type='hidden' value='"+dataObj.Data[i]._id+"'/></div>";
							}	
							$(".shrine-bg-list").html(html);
							$(".shrine-bg-list").slideDown("fast");
							
							$(".shrine-bg-content").click(function(){
								_tpicpathbg=$(this).find(".pop2-img").attr("data-bg");
								_bgid=$(this).find("input[type=hidden]").val();
								
								$(".shrine-bg-preview").css("background-image","url("+_tpicpathbg+")");
								new jBox('Notice', {width: 150,height: 50,content: '背景更换成功！',autoClose: 2000,
									color: 'black',animation: {open: 'slide',close: 'slide:top'}
								});	
								
								$(".shrine-bg-list").slideUp("fast");
							});
	           		},
	           			error:function(XMLHttpRequest,textStatus,errorThrown)
	           		{
	           			console.log(errorThrown);
	           		}
	         	});
	    	}
	    
	     function showHS(){		    
		    $.ajax({
	          url: "/api/Memorial/GetTombstoneinfo?tCategory=1",
	          type: "GET",
	          dataType: "json", 
	          success: function (data) {	
							var dataObj=eval(data);
							var html="";
							for(var i=0;i<dataObj.Data.length;i++){
								html+="<div class='col-lg-4 col-md-4 col-sm-4 col-xs-4 shrine-hs-content' style='padding:5px'>";
								html+="<div class='pop2-img' data-bg='"+dataObj.Data[i]._tpicpath+"' style='background-image:url("+dataObj.Data[i]._tpicpath+");' title='"+dataObj.Data[i]._tname+"'>";
								html+="</div><input id='bgid' type='hidden' value='"+dataObj.Data[i]._id+"'/></div>";
							}	
							$(".shrine-hs-list").html(html);
							$(".shrine-hs-list").slideDown("fast");
							
							$(".shrine-hs-content").click(function(){
								_tpicpath=$(this).find(".pop2-img").attr("data-bg");
								_tid=$(this).find("input[type=hidden]").val();
								
								$(".shrine-hs-preview").css("background-image","url("+_tpicpath+")");
								new jBox('Notice', {width: 150,height: 50,content: '墓碑更换成功！',autoClose: 2000,
									color: 'black',animation: {open: 'slide',close: 'slide:top'}
								});	
								
								$(".shrine-hs-list").slideUp("fast");
							});
	           		},
	           			error:function(XMLHttpRequest,textStatus,errorThrown)
	           		{
	           			console.log(errorThrown);
	           		}
	         	});
	    	}
	    
	    //做个下简易的验证  大小 格式 
			$('#avatarInput').on('change', function(e) {
				var filemaxsize = 1024 * 5;//5M
				var target = $(e.target);
				var Size = target[0].files[0].size / 1024;
				if(!this.files[0].type.match(/image.*/)) {
					new jBox('Notice', {width: 120,height: 50,content: '请选择图片文件',autoClose: 2000,
				    	color: 'black',animation: {open: 'tada',close: 'slide:top'}
				  	});
				} else {
					var filename = document.querySelector("#avatar-name");
					var texts = document.querySelector("#avatarInput").value;
					var teststr = texts; 
					testend = teststr.match(/[^\\]+\.[^\(]+/i); 
					filename.innerHTML = testend;
				}			
			});			
			
			
				function CreateMemorial(){
					_mname=$.trim($("#person-name").val());
					_birthdate=$.trim($("#person-birth").val());
					_deathdate=$.trim($("#person-death").val());
					_msex=$('input:radio[name="inlineRadioOptions"]:checked').val();
					_mage=$.trim($("#person-age").val());
					if(_mage==""||_mage==null)
						_mage=0;
					_birthaddress=$.trim($("#person-region").val());
					_homeaddress=$.trim($("#person-census").val());
					_origin=$.trim($("#person-origin").val());
					_buried=$.trim($("#person-bury").val());
					_nation=$.trim($("#person-race").find("option:selected").text());
					_mresume=$.trim($("#person-achievement").val());
					_mintropicpath="";
					_note1=$("#person-class").find("option:selected").val();
					_note2=$.cookie("JPN");
					_note3=$.cookie("JP");					
							   				
					_mhname=$.trim($("#shrine-name").val());
					
    				if(_mname==""||_mname==null){
    					new jBox('Notice', {width: 150,height: 50,content: '请输入逝者姓名',autoClose: 2000,
							color: 'black',animation: {open: 'slide',close: 'slide:top'}
						});
    				}else if(_birthdate==""||_birthdate==null){
    					new jBox('Notice', {width: 150,height: 50,content: '请选择逝者生辰',autoClose: 2000,
							color: 'black',animation: {open: 'slide',close: 'slide:top'}
						});
    				}
    				else if(_deathdate==""||_deathdate==null){
    					new jBox('Notice', {width: 150,height: 50,content: '请选择逝世日期',autoClose: 2000,
							color: 'black',animation: {open: 'slide',close: 'slide:top'}
						});
	    			}else if(_mhname==""||_mhname==null){
	    				$(".Newshrine-menu").removeClass("Newshrine-menu-select");
			    		$(this).addClass("Newshrine-menu-select");
	    				$(".newshrine-main-person").hide();
	    				$(".newshrine-main-shrine").show();
	    				new jBox('Notice', {width: 150,height: 50,content: '请入祭奠堂名称',autoClose: 2000,
							color: 'black',animation: {open: 'slide',close: 'slide:top'}
						});
	    			}else{
	    				$.ajax({
	          				type: "POST",
	          				dataType: "json", 
			                contentType: "application/json",
			                url: "/api/Memorial/SubmitMemorial",
		                	data: JSON.stringify({ 
		                		"_genealogyid": "",
							    "_sid": "",
							    "_mname": _mname,
							    "_msex": _msex,
							    "_mage": _mage,
							    "_birthdate": _birthdate,
							    "_birthaddress": _birthaddress,
							    "_homeaddress": _homeaddress,
							    "_deathdate": _deathdate,
							    "_origin": _origin,
							    "_buried": _buried,
							    "_nation": _nation,
							    "_mresume": _mresume,
							    "_mphotopath": _mphotopath,
							    "_mintropicpath": _mintropicpath,
							    "_sign": _sign,
							    "_note1": _note1,
							    "_note2": _note2,
							    "_note3": _note3,
							    "_note4": "",
							    "_note5": "",
							    "_note6": ""
							    }),
							success: function(data) {
								var dataObj=eval(data);													
								_mid=dataObj.Data._id;
								CreateMemorialHall(_mid);	
							},error: function (msg) { 						
								window.alert(msg.responseText);
							}
						});
	    			}
				}
   		
   			function CreateMemorialHall(mid){
				_createtime=mydate;
				_rightsid=$.cookie("JP");
				_rightsname=$.cookie("JPN");
				
				$.ajax({
					type: "POST",
	          		dataType: "json", 
			        contentType: "application/json",
			        url: "/api/Memorial/SubmitMemorialHall",
			        data: JSON.stringify({
					    "_mhname": _mhname,
					    "_mid": mid,
					    "_mname": _mname,
					    "_mphotopath":_mphotopath,
					    "_bgid": +_bgid,
					    "_tpicpathbg": _tpicpathbg,
					    "_tid": _tid,
					    "_tpicpath": _tpicpath,
					    "_sort": 1,
					    "_top": 1,
					    "_createtime": _createtime,
					    "_rightsid": _rightsid,
					    "_rightsname": _rightsname,
					    "_grade": "1",
					    "_sign": "1",
					    "_note1": "http://120.77.182.247:8001/JdSource/anthology/MissingYou.mp3",
					    "_note2": "JP1010002",
					    "_note3": "",
					    "_note4": "",
					    "_note5": "",
					    "_note6": ""
					}),
			          success: function (data) {	
			          		var dataObj=eval(data);													
							var hid=dataObj.Data._id;
							new jBox('Notice', {width: 150,height: 50,content: '祭奠堂创建成功',autoClose: 2000,
								color: 'black',animation: {open: 'slide',close: 'slide:top'}
							});	
							//window.location="Worship.html?mn="+hid;
							window.location="Shrine.html?m="+mid;
	           		},
	           		error:function(XMLHttpRequest,textStatus,errorThrown)
	           		{
	           			console.log(errorThrown);
	           		}
	         	});
   			}
   		
	   </script>
	   <style>
		/*----------用来移除向下箭头----------
		input[type="date"]::-webkit-calendar-picker-indicator {
		   display: none;
		}*/
		
		/*----------用来移除叉叉按钮----------*/
		input[type="date"]::-webkit-clear-button{
		   display:none;
		}
	   </style>
	</head>
	<body style="background: #edebde;">
		<div class="index-top">
			<div class="index-shrineback" onclick="history.go(-1)"> </div>
			创建祭奠堂
			<div class="Newshrine-save" onclick="CreateMemorial()">保存</div>
		</div>
		<div class="Newshrine-menus">
			<div class="Newshrine-menu Newshrine-menu-select">逝者信息</div>
			<div class="Newshrine-menu">祭奠堂信息</div>
		</div>
		<div class="newshrine-main-person">
			<div class="newshrine-main"> 
				<div class="Newshrine-person-face">
					<div></div>
				</div>
				<div class="form-group">
					   <label  class="control-label col-sm-4 col-lg-3 col-md-5 col-xs-5">选择被祭奠人：</label>
					   <div class="col-sm-8 col-lg-9 col-md-7 col-xs-7" style="text-align: right;">
					    <label class="radio-inline" style="line-height: 1.5em">
						  <input type="radio" name="inlineRadioOptions1" id="inlineRadio1" value="1"> 列表选择
						</label>
						<label class="radio-inline" style="line-height: 1.5em">
						  <input type="radio" name="inlineRadioOptions1" id="inlineRadio2" value="0" checked="checked"> 无
						</label>
					    </div>
				  </div>
				<div class="form-group">
					    <label  class="control-label col-sm-4 col-lg-3 col-md-4 col-xs-4">逝者性别：</label>
					   <div class="col-sm-8 col-lg-9 col-md-5 col-xs-5" style="text-align: right;">
					    <label class="radio-inline" style="line-height: 1.5em">
						  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="男" checked="checked"> 男
						</label>
						<label class="radio-inline" style="line-height: 1.5em">
						  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="女"> 女
						</label>
					    </div>
				  </div>
				<div class="form-group">
				    <label for="person-name" class="control-label col-sm-4 col-lg-3 col-md-4 col-xs-4">逝者姓名：</label>
				    <div class="col-sm-8 col-lg-9 col-md-5 col-xs-5">
				      <input type="text" class="form-control Newshrine-form-control form-control-important" id="person-name" placeholder="(必填)" >
				    </div>
				  </div>
				 
				  <div class="form-group">
					    <label for="person-age" class="control-label col-sm-4 col-lg-3 col-md-3 col-xs-3">逝者年龄：</label>
					    <div class="col-sm-8 col-lg-9 col-md-6 col-xs-6">
					      <input type="number" class="form-control Newshrine-form-control" id="person-age" placeholder="请输入逝者年龄" >
					    </div>
				  </div>
				   <div class="form-group form-group-bg">
					    <label for="person-birth" class="control-label col-sm-4 col-lg-3 col-md-3 col-xs-3"  >逝者生辰：</label>
					    <div class="col-sm-8 col-lg-9 col-md-7 col-xs-9">
					    	<input type="text" onfocus="(this.type='date')" class="form-control Newshrine-form-control form-control-important" id="person-birth" placeholder="(必填)"  />
					    </div>
				  </div>
				    <div class="form-group form-group-bg">
					    <label for="person-death" class="control-label col-sm-4 col-lg-3 col-md-3 col-xs-3" >逝世日期：</label>
					    <div class="col-sm-8 col-lg-9 col-md-7 col-xs-9">
					      <input type="text" onfocus="(this.type='date')" class="form-control  Newshrine-form-control form-control-important" id="person-death" placeholder="(必填)" >
					    </div>
				  </div>
				  <div class="form-group form-group-bg">
					    <label for="person-race" class="control-label col-sm-4 col-lg-3 col-md-3 col-xs-3">逝世民族：</label>
					    <div class="col-sm-8 col-lg-9 col-md-7 col-xs-9">
					      <select class="form-control Newshrine-form-control" id="person-race" dir="rtl" >
					      	<option value="0">请选择民族</option>
						    <option value="1">汉族</option>
						    <option value="2">蒙古族</option>  
						    <option value="3">回族</option>  
						    <option value="4">藏族</option>  
						    <option value="5">维吾尔族</option>  
						    <option value="6">苗族</option>  
						    <option value="7">彝族</option>  
						    <option value="8">壮族</option>  
						    <option value="9">布依族</option>  
						    <option value="10">朝鲜族</option>  
						    <option value="11">满族</option>  
						    <option value="12">侗族</option>  
						    <option value="13">瑶族</option>  
						    <option value="14">白族</option>  
						    <option value="15">土家族</option>  
						    <option value="16">哈尼族</option>  
						    <option value="17">哈萨克族</option>  
						    <option value="18">傣族</option>  
						    <option value="19">黎族</option>  
						    <option value="20">傈僳族</option>  
						    <option value="21">佤族</option>  
						    <option value="22">畲族</option>  
						    <option value="23">高山族</option>  
						    <option value="24">拉祜族</option>  
						    <option value="25">水族</option>  
						    <option value="26">东乡族</option>  
						    <option value="27">纳西族</option>  
						    <option value="28">景颇族</option>  
						    <option value="29">柯尔克孜族</option>  
						    <option value="30">土族</option>  
						    <option value="31">达斡尔族</option>  
						    <option value="32">仫佬族</option>  
						    <option value="33">羌族</option>  
						    <option value="34">布朗族</option>  
						    <option value="35">撒拉族</option>  
						    <option value="36">毛南族</option>  
						    <option value="37">仡佬族</option>  
						    <option value="38">锡伯族</option>  
						    <option value="39">阿昌族</option>  
						    <option value="40">普米族</option>  
						    <option value="41">塔吉克族</option>  
						    <option value="42">怒族</option>  
						    <option value="43">乌孜别克族</option>  
						    <option value="44">俄罗斯族</option>  
						    <option value="45">鄂温克族</option>  
						    <option value="46">德昂族</option>  
						    <option value="47">保安族</option>  
						    <option value="48">裕固族</option>  
						    <option value="49">京族</option>  
						    <option value="50">塔塔尔族</option>  
						    <option value="51">独龙族</option>  
						    <option value="52">鄂伦春族</option>  
						    <option value="53">赫哲族</option>  
						    <option value="54">门巴族</option>  
						    <option value="55">珞巴族</option>  
						    <option value="56">基诺族</option>  
						    <option value="57">其他</option>  
						   </select>  
					    </div>
				  </div>
				  <div class="form-group form-group-bg">
					    <label for="person-class" class="control-label col-sm-4 col-lg-3 col-md-3 col-xs-3">祭奠类型：</label>
					    <div class="col-sm-8 col-lg-9 col-md-9 col-xs-9">
					      <select class="form-control Newshrine-form-control" id="person-class" dir="rtl">
					      	<option value="1">祭奠名人</option>
					      	<option value="2">祭奠先祖</option>
					      	<option value="3">祭奠亲人</option>
					      	<option value="4">其他祭奠</option>
					      	</select>
					    </div>
				  </div>
				  <div class="form-group">
				    <label for="person-region" class="control-label col-sm-4 col-lg-3 col-md-3 col-xs-3">出生地址：</label>
				    <div class="col-sm-8 col-lg-9 col-md-9 col-xs-9">
				      <input type="text" class="form-control Newshrine-form-control" id="person-region" placeholder="请输入出生地" >
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="person-census" class="control-label col-sm-4 col-lg-3 col-md-3 col-xs-3">户籍地址：</label>
				    <div class="col-sm-8 col-lg-9 col-md-9 col-xs-9">
				      <input type="text" class="form-control Newshrine-form-control" id="person-census" placeholder="请输入户籍地址" >
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="person-origin" class="control-label col-sm-4 col-lg-3 col-md-3 col-xs-3">逝者祖籍：</label>
				    <div class="col-sm-8 col-lg-9 col-md-9 col-xs-9">
				      <input type="text" class="form-control Newshrine-form-control" id="person-origin" placeholder="请输入祖籍" >
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="person-bury" class="control-label col-sm-4 col-lg-3 col-md-3 col-xs-3">逝者葬地：</label>
				    <div class="col-sm-8 col-lg-9 col-md-9 col-xs-9">
				      <input type="text" class="form-control Newshrine-form-control" id="person-bury" placeholder="请输入葬地" >
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="person-achievement" class="control-label col-sm-4 col-lg-3 col-md-5 col-xs-5">逝者生平：</label>				    
				  </div>
				  <div class="col-sm-12 col-lg-12 col-md-12 col-xs-12" style="padding-bottom: 20px;">
				      <textarea  class="form-control" id="person-achievement" placeholder="请输入逝者生平简介" style="height: 100px;width: 100%;border-radius: 0;" ></textarea>
				  </div>
			</div>
		</div>
		<div class="Newshrine-person-face-form">
			<div class="Newshrine-person-face-form-close">×</div>
			<div class="clip-content">
            <div class="upload-container choose-gallery">
                <div class="upload-pretty button-three-dimen">
                    <input type="file" id="targetImg">本地上传
                </div>
            </div>
            <div class="upload-container choose-camera">
                <div class="upload-pretty button-three-dimen">
                    <input type="file" id="targetImgCamera" capture="camera">手机拍摄
                </div>
            </div>

            <div class="img-clip"></div>

            <nav class="clip-action nav-bar nav-bar-tab hidden">
                <a class="tab-item" id="btn-reload">
                    <span class="mui-icon mui-icon-arrowleft tab-icon"></span>
                    <span class="tab-label ">取消</span>
                </a>
                <a class="tab-item " id="btn-rotate-anticlockwise">
                    <span class="mui-icon mui-icon-refreshempty tab-icon rotate90"></span>
                    <span class="tab-label ">逆时针旋转</span>
                </a>
                <a class="tab-item " id="btn-rotate-clockwise">
                    <span class="mui-icon mui-icon-refreshempty tab-icon"></span>
                    <span class="tab-label ">顺时针旋转</span>
                </a>
                <a class="tab-item hidden" id="btn-maxrect">
                    <span class="mui-icon mui-icon-navigate tab-icon"></span>
                    <span class="tab-label ">最大选择</span>
                </a>
                <a class="tab-item" id="btn-verify">
                    <span class="mui-icon mui-icon-checkmarkempty tab-icon"></span>
                    <span class="tab-label ">确定</span>
                </a>
            </nav>
        </div>

        
        <script type="text/javascript" src="js/fileinput.js"></script>
        <script type="text/javascript" src="js/exif.js"></script>
        <script type="text/javascript" src="js/image-clip.js"></script>
        <script>
            var chooseGallery;
            var chooseCamera;
            var cropImage;
            var imgData;
            var clipContent;
            var clipAction;
            var showContent;
            var showImg;
            var targetImg;
            var targetImgCamera;

            initPage();

            function initPage() {
                initParams();
                initListeners();
                initImgClip();
            }

            function initParams() {
                targetImg = document.querySelector('#targetImg');
                targetImgCamera = document.querySelector('#targetImgCamera');
                chooseGallery = document.querySelector('.choose-gallery');
                chooseCamera = document.querySelector('.choose-camera');
                clipContent = document.querySelector('.clip-content');
                clipAction = document.querySelector('.clip-action');
            }

            function initImgClip() {
                new FileInput({
                    container: '#targetImg',
                    isMulti: false,
                    type: 'Image_Camera',
                    success: function(b64, file, detail) {
                        // console.log("选择:" + b64);
                        console.log("fileName:" + file.name);

                        loadImg(b64);
                    },
                    error: function(error) {
                        console.error(error);
                    }
                });
                new FileInput({
                    container: '#targetImgCamera',
                    isMulti: false,
                    type: 'Camera',
                    success: function(b64, file, detail) {
                        // console.log("选择:" + b64);
                        console.log("fileName:" + file.name);
                        loadImg(b64);
                    },
                    error: function(error) {
                        console.error(error);
                    }
                });
            }

            function loadImg(b64) {
                changeImgClipShow(true);

                var img = new Image();
                img.src = b64;

                img.onload = function() {
                    EXIF.getData(img, function() {
                        var orientation = EXIF.getTag(this, 'Orientation');
                        
                        cropImage && cropImage.destroy();
                        cropImage = new ImageClip({
                            container: '.img-clip',
                            img,
                            // 0代表按下才显示，1恒显示，-1不显示
                            sizeTipsStyle: 0,
                            // 为1一般是屏幕像素x2这个宽高
                            // 最终的大小为：屏幕像素*屏幕像素比（手机中一般为2）*compressScaleRatio
                            compressScaleRatio: 1.1,
                            // iphone中是否继续放大：x*iphoneFixedRatio
                            // 最好compressScaleRatio*iphoneFixedRatio不要超过2
                            iphoneFixedRatio: 1.8,
                            // 减去顶部间距，底部bar,以及显示间距
                            maxCssHeight: window.innerHeight - 100 - 50 - 20,
                            // 放大镜捕获的图像半径
                            captureRadius: 30,
                            // 是否采用原图像素（不会压缩）
                            isUseOriginSize: false,
                            // 增加最大宽度，增加后最大不会超过这个宽度
                            maxWidth: 0,
                            // 是否固定框高，优先级最大，设置后其余所有系数都无用直接使用这个固定的宽，高度自适应
                            forceWidth: 0,
                            // 同上，但是一般不建议设置，因为很可能会改变宽高比导致拉升，特殊场景下使用
                            forceHeight: 0,
                            // 压缩质量
                            quality: 0.92,
                            mime: 'image/jpeg',
                        });

                        // 6代表图片需要顺时针修复（默认逆时针处理了，所以需要顺过来修复）
                        switch (orientation) {
                            case 6:
                                cropImage.rotate(true);
                                break;
                            default:
                                break;
                        }

                    });
                };
            }
            
            function resizeShowImg(b64) {
                var img = new Image();

                img.src = b64;
                img.onload = showImgOnload;
            }

            function showImgOnload() {
                // 必须用一个新的图片加载，否则如果只用showImg的话永远都是第1张
                // margin的话由于有样式，所以自动控制了
                var width = this.width;
                var height = this.height;
                var wPerH = width / height;
                var MAX_WIDTH = Math.min(window.innerWidth, width);
                var MAX_HEIGHT = Math.min(window.innerHeight - 50 - 100, height);
                var legalWidth = MAX_WIDTH;
                var legalHeight = legalWidth / wPerH;

                if (MAX_WIDTH && legalWidth > MAX_WIDTH) {
                    legalWidth = MAX_WIDTH;
                    legalHeight = legalWidth / wPerH;
                }
                if (MAX_HEIGHT && legalHeight > MAX_HEIGHT) {
                    legalHeight = MAX_HEIGHT;
                    legalWidth = legalHeight * wPerH;
                }

                var marginTop = (window.innerHeight - 50 - legalHeight) / 2;

                showImg.style.marginTop = marginTop + 'px';
                showImg.style.width = legalWidth + 'px';
                showImg.style.height = legalHeight + 'px';
            }

            function changeImgClipShow(isClip) {
                if (isClip) {
                    chooseGallery.classList.add('hidden');
                    chooseCamera.classList.add('hidden');
                    clipAction.classList.remove('hidden');
                } else {
                    chooseGallery.classList.remove('hidden');
                    chooseCamera.classList.remove('hidden');
                    clipAction.classList.add('hidden');
                    // 需要改变input，否则下一次无法change
                    targetImg.value = '';
                    targetImgCamera.value = '';
                }
            }

            function initListeners() {
                document.querySelector('#btn-reload').addEventListener('click', function() {
                    cropImage && cropImage.destroy();
                    changeImgClipShow(false);
                });                

                document.querySelector('#btn-maxrect').addEventListener('click', function() {
                    if (!cropImage) {
                        tips('请选择图片');
                        return;
                    }
                    cropImage.resetClipRect();
                });

                document.querySelector('#btn-rotate-anticlockwise').addEventListener('click', function() {
                    if (!cropImage) {
                        tips('请选择图片');
                        return;
                    }
                    cropImage.rotate(false);
                });

                document.querySelector('#btn-rotate-clockwise').addEventListener('click', function() {
                    if (!cropImage) {
                        tips('请选择图片');
                        return;
                    }
                    cropImage.rotate(true);
                });

                document.querySelector('#btn-verify').addEventListener('click', function() {
                    if (!cropImage) {
                        tips('请选择图片');
                        return;
                    }

                    cropImage.clip(false);
                    imgData = cropImage.getClipImgData();
                    recognizeImg(function() {
                        changeContent(true);
                    }, function(error) {
                        tips(JSON.stringify(error), true);
                    });

                });
            }

            function showImgDataLen(imgData) {
                var len = imgData.length;
                var sizeStr = len + 'B';

                if (len > 1024 * 1024) {
                    sizeStr = (Math.round(len / (1024 * 1024))).toString() + 'MB';
                } else if (len > 1024) {
                    sizeStr = (Math.round(len / 1024)).toString() + 'KB';
                }

                tips('处理后大小：' + sizeStr);
            }

            function tips(msg, isAlert) {
                if (isAlert) {
                    alert(msg);
                } else {
                    toast(msg);
                }
            }

            function toast(message) {
                var CLASS_ACTIVE = 'mui-active';
                var duration = 2000;
                var toastDiv = document.createElement('div');

                toastDiv.classList.add('mui-toast-container');
                toastDiv.innerHTML = `<div class="mui-toast-message">${message}</div>`;
                toastDiv.addEventListener('webkitTransitionEnd', () => {
                    if (!toastDiv.classList.contains(CLASS_ACTIVE)) {
                        toastDiv.parentNode.removeChild(toastDiv);
                        toastDiv = null;
                    }
                });
                // 点击则自动消失
                toastDiv.addEventListener('click', () => {
                    toastDiv.parentNode.removeChild(toastDiv);
                    toastDiv = null;
                });
                document.body.appendChild(toastDiv);
                toastDiv.classList.add(CLASS_ACTIVE);
                setTimeout(function() {
                    toastDiv && toastDiv.classList.remove(CLASS_ACTIVE);
                }, duration);
            }

            function changeContent(isShowContent) {
                    clipContent.classList.add('hidden');
                    //resizeShowImg(imgData);
                    //showImg.src = imgData;
                    $(".Newshrine-person-face-form").fadeOut("fast");
					$(".Newshrine-person-face div").css("background-image","url("+imgData+")");
					_mphotopath=imgData;
            }

            function b64ToBlob(urlData) {
                var arr = urlData.split(',');
                var mime = arr[0].match(/:(.*?);/)[1] || 'image/png';
                // 去掉url的头，并转化为byte
                var bytes = window.atob(arr[1]);

                // 处理异常,将ascii码小于0的转换为大于0
                var ab = new ArrayBuffer(bytes.length);
                // 生成视图（直接针对内存）：8位无符号整数，长度1个字节
                var ia = new Uint8Array(ab);
                for (var i = 0; i < bytes.length; i++) {
                    ia[i] = bytes.charCodeAt(i);
                }

                return new Blob([ab], {
                    type: mime
                });
            }

            function downloadFile(content) {
                // Convert image to 'octet-stream' (Just a download, really)
                var imageObj = content.replace("image/jpeg", "image/octet-stream");
                window.location.href = imageObj;
            }

            function recognizeImg(success, error) {
                // 里面正常有：裁边，摆正，梯形矫正，锐化等算法操作
                success();
            }

            function upload(success, error) {
                success();
            }
        </script>
		</div>
		<div class="newshrine-main-shrine">
			<div class="newshrine-main">
				<div class="form-group">
				    <label for="shrine-name" class="control-label col-sm-4 col-lg-3 col-md-4  col-xs-4" >祭奠堂名称：</label>
				    <div class="col-sm-8 col-lg-9 col-md-8 col-xs-8">
				      <input type="text" class="form-control form-control-important Newshrine-form-control" id="shrine-name" placeholder="(必填)" >
				    </div>
				  </div>				 
				   <div  id="avatar-modal" class="shrine-face-preview">
							<div class="modal-content" style="box-shadow: none; border: none;width: 100%;background: transparent;">
								<!--<form class="avatar-form" action="upload-logo.php" enctype="multipart/form-data" method="post">-->
								<form class="avatar-form">
									<div class="modal-body" style="width: 100%;padding: 0;">
										<div class="avatar-body" style="height: 350px;width:100%;padding-left: 0;padding-right: 0;">
											 <div class="form-group form-group-bg" style="margin-bottom: 0;">
											    <label for="avatarInput" class="control-label col-sm-4 col-lg-3 col-md-4 col-xs-4">逝者遗像：</label>
											    <div class="col-sm-8 col-lg-9 col-md-8 col-xs-8" style="display: inline;">
											    	<input class="Newshrine-form-control form-control"  type="text" onClick="$('input[id=avatarInput]').click();" placeholder="请选择逝者遗像"/>
											      	<div class="avatar-upload">
													<input class="avatar-src" name="avatar_src" type="hidden"/>
													<input class="avatar-data" name="avatar_data" type="hidden"/>													
													<span id="avatar-name" style="margin-left: 1em;"></span>
													<input class="avatar-input hide" id="avatarInput" name="avatar_file" type="file"/>
													</div>
											    </div>
											 </div>											
											<div class="row" style="width:95%;margin: 0 auto;">
												<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" style="padding-right: 0;padding-left: 0;">
													<div class="avatar-wrapper"></div>
												</div>
												<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 shrine-face-demo-content" style="padding-right: 0;padding-left: 0;">
													<div style="width: 100%;text-align: center;">效果展示</div>
													<div class="avatar-preview preview-sm" id="imageHead"></div>
												</div>
											</div>
											<div class="row avatar-btns" style="margin-left: 0;margin-right: 0;">
												<div class="col-md-12 col-sm-12 col-sm-12 col-xs-12" style="margin: 5px auto;text-align: center;">
													<div class="btn-group">
														<button class="btn btn-warning fa fa-undo" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees"></button>
													</div>
													<div class="btn-group">
														<button class="btn  btn-warning fa fa-repeat" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees"></button>
													</div>
													<div class="btn-group">
														<button class="btn btn-danger btn-block avatar-save fa fa-save" type="button" > 保存遗像</button>
													</div>
												</div>

												<!--<div class="col-md-2  col-sm-2 " style="margin-top: 5px;padding-left: 0;padding-right: 0;">
													<button class="btn btn-warning btn-block avatar-save fa fa-save" type="button" data-dismiss="modal"> 保存</button>
												</div>-->
											</div>
										</div>
									</div>
								</form>
							</div>
				   </div>
				   <div style="clear: both;height: 30px;"></div>
				  <div class="form-group  form-group-bg">
				    <label for="shrine-bg" class="control-label col-sm-5 col-lg-3 col-md-5 col-xs-5">祭奠堂风格：</label>
				    <div class="col-sm-7 col-lg-9 col-md-7 col-xs-7">
				      <input class="Newshrine-form-control form-control"  type="text" id="shrine-bg" placeholder="请选择祭奠堂风格" onclick="showBG()">
				    </div>
				  </div>				  
				    <div class="shrine-bg-preview"></div>
				    <div class="shrine-bg-list"></div>
					<div class="form-group  form-group-bg">
				    <label for="shrine-headstone" class="control-label col-sm-5 col-lg-3 col-md-5 col-xs-5">墓碑：</label>
				    <div class="col-sm-7 col-lg-9 col-md-7 col-xs-7">
				      <input class="Newshrine-form-control form-control"  id="shrine-headstone" placeholder="请选墓碑样式" onclick="showHS()">
				    </div>
				  </div>
				  <div class="shrine-hs-preview"></div>
				  <div class="shrine-hs-list"></div>
			</div>
		</div>

		<div class="toTop"  href="#to-top" id="toTop">
				返回<br/>顶部
			</div>
	</body>
</html>
